<template>
  <div class="approval-records">
    <div class="card approval-records__search">
      <el-form inline>
        <el-form-item label="审批类型：">
          <el-select v-model="params.type_id" placeholder="请选择审批类型" clearable>
            <el-option
              v-for="item in approvalType"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审批状态：">
          <el-select v-model="params.state" placeholder="请选择审批状态" clearable multiple>
            <el-option label="审批通过" value="approved" />
            <el-option label="待审批" value="wait" />
            <el-option label="已拒绝" value="refuse" />
            <el-option label="已撤销" value="revoke" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="card">
      <el-table
        v-loading="loading"
        :data="list"
        border
        stripe
      >
        <el-table-column type="expand">
          <template v-slot="{ row }">
            <!-- 展开行的内容将在这里添加 -->
            <ReserveItem
              v-if="row.template.type.code === RESERVE_CONFERENCE_ROOM"
              :record="row.event"
            />

            <VehicleItem
              v-if="row.template.type.code === DISPATCH_VEHICLES"
              :record="row.event"
            />

            <KilometerRegisterItem
              v-if="row.template.type.code === REGISTER_KILOMETER"
              :record="row.event"
            />
          </template>
        </el-table-column>
        <el-table-column prop="user.username" label="提交人" align="center" />
        <el-table-column prop="template.type.name" label="审批类型" align="center" />
        <el-table-column prop="status" label="状态" align="center">
          <template v-slot="{ row }">
            <el-tag
              :type="tagStatus(row.status).tag"
            >
              {{ tagStatus(row.status).text }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" align="center">
          <template v-slot="{ row }">
            {{ timeFormat(row.created_at) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button type="text" size="small" @click="handlerShow(row)">
              <i class="el-icon-view" /> 查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="approval-records__page">
        <Pagination
          style="margin-top: 0; padding-bottom: 0;"
          :total="total"
          :page="params.page"
          :limit="params.paginate"
          @pagination="pagination"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getApprovalRecords, getApprovalType } from '@/api/approvalFlow'
import { timeFormat } from '@/utils'
import Pagination from '@/components/Pagination/index.vue'
import ReserveItem from '@/views/approvalFlow/components/approvalRecords/ReserveItem.vue'
import VehicleItem from '@/views/approvalFlow/components/approvalRecords/VehicleItem.vue'
import { DISPATCH_VEHICLES, REGISTER_KILOMETER, RESERVE_CONFERENCE_ROOM } from '@/views/approvalFlow/js/constant'
import KilometerRegisterItem from '@/views/approvalFlow/components/approvalRecords/KilometerRegisterItem.vue'

export default {
  name: 'ApprovalRecords',
  components: { KilometerRegisterItem, ReserveItem, Pagination, VehicleItem },
  data() {
    return {
      list: [],
      loading: false,
      total: 0,
      params: {
        page: 1,
        paginate: 10,
        type_id: null,
        state: []
      },
      timeFormat,
      DISPATCH_VEHICLES,
      RESERVE_CONFERENCE_ROOM,
      REGISTER_KILOMETER,
      approvalType: []
    }
  },
  created() {
    this.getApprovalRecordsList()
    this.getApprovalType()
  },
  methods: {
    async getApprovalType() {
      try {
        const res = await getApprovalType()
        this.approvalType = res.data
      } catch (error) {
        this.$message.error('获取审批类型失败')
      }
    },
    async getApprovalRecordsList() {
      this.loading = true
      try {
        const res = await getApprovalRecords({
          ...this.params,
          state: this.params.state.length ? JSON.stringify(this.params.state) : null
        })
        this.list = res.data.data
        this.total = res.data.total
      } catch (error) {
        this.$message.error('获取审批记录失败')
      } finally {
        this.loading = false
      }
    },

    handlerShow(row) {
      this.$router.push({
        path: `/approval/detail/${row.id}`
      })
    },
    pagination(page) {
      this.params.page = page.page
      this.params.paginate = page.limit
      this.getApprovalRecordsList()
    },
    handleSearch() {
      this.params.page = 1
      this.getApprovalRecordsList()
    },
    handleReset() {
      this.params.type_id = null
      this.params.state = []
      this.handleSearch()
    },
    tagStatus(state) {
      switch (state) {
        case 'approved':
          return {
            tag: 'success',
            text: '审批通过'
          }

        case 'refuse':
          return {
            tag: 'danger',
            text: '已拒绝'
          }

        case 'revoke':
          return {
            tag: 'info',
            text: '已撤销'
          }

        default:
          return {
            tag: 'warning',
            text: '待审批'
          }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.approval-records {
  padding: 20px;
  &__search {
    margin-bottom: 20px;
    ::v-deep(.el-form-item) {
      margin-bottom: 0;
      margin-right: 20px;
      .el-form-item__label {
        font-weight: 400;
      }
    }
  }
  &__page {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
